const path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = function (env, argv) {
    return {
        entry: {
            'index': [
                path.resolve(__dirname, 'src/js/index.js')
            ]
        },
        mode: argv.mode === 'production' ? 'production' : 'development',
        devtool: argv.mode === 'production' ? 'source-map' : 'eval',
        output: {
            filename: 'js/[name].js',
            path: path.resolve(__dirname, './dist'),
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                esModule: true,
                                publicPath: 'css/'
                            },
                        },
                        'css-loader'
                    ],
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                esModule: true,
                                publicPath: 'css/'
                            },
                        },
                        // Translates CSS into CommonJS
                        'css-loader',
                        // Compiles Sass to CSS
                        'sass-loader',
                    ],
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.(eot|ttf|woff|woff2)$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'font/', //输出路径，相对于上面webpack.output.path
                            publicPath: '../font/', //相对与引用字体的css所在的路径
                        }
                    },
                },
            ]
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        },
        /**
         * @see https://webpack.js.org/configuration/dev-server/
         */
        devServer: {
            contentBase: path.join(__dirname, 'static'),
            contentBasePublicPath: "/static",
            // compress: true,
            // open: true,
            // openPage: '/different/page',
            // hot: true,
            // hotOnly: true,
            liveReload: true,
            host: '0.0.0.0',
            port: 3100,
            index: 'index.html',
            overlay: {
                warnings: true,
                errors: true
            },
            historyApiFallback: true
        },
        plugins: [
            /**
             * @see https://www.npmjs.com/package/html-webpack-plugin,
             * @see https://webpack.docschina.org/plugins/html-webpack-plugin/
             */
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: path.resolve(__dirname, 'src/index.html'),
                inject: true,
                // minify: {
                //     caseSensitive: false, //是否大小写敏感
                //     collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled
                //     collapseWhitespace: true //是否去除空格
                // },
                chunks: ['index']
            }),
            new MiniCssExtractPlugin({
                filename: 'css/[name].css',
                chunkFilename: '[id].css',
            })
        ]
    }
}